var qizipoint =
    [{ "x": 75, "y": 100 }, { "x": 175, "y": 200 }, { "x": 275, "y": 300 },
    { "x": 75, "y": 450 }, { "x": 175, "y": 450 }, { "x": 275, "y": 450 },
    { "x": 75, "y": 800 }, { "x": 175, "y": 700 }, { "x": 275, "y": 600 },
    { "x": 425, "y": 800 }, { "x": 425, "y": 700 }, { "x": 425, "y": 600 },
    { "x": 775, "y": 800 }, { "x": 675, "y": 700 }, { "x": 575, "y": 600 },
    { "x": 775, "y": 450 }, { "x": 675, "y": 450 }, { "x": 575, "y": 450 },
    { "x": 775, "y": 100 }, { "x": 675, "y": 200 }, { "x": 575, "y": 300 },
    { "x": 425, "y": 100 }, { "x": 425, "y": 200 }, { "x": 425, "y": 300 }]
var player_color = ["red", "black", "white"]

var QZ = function () {
    this.x1 = null;
    this.y1 = null;
    this.iscreate = false
    this.color = null
    self_qizi = this

    this.setdiv = function (div) {
        self_qizi.x1 = div.style.top;
        self_qizi.y1 = div.style.left;
    }

    this.setcolor = function (c) {
        self_qizi.color = c
    }
    this.getx = function () {
        return self_qizi.x1;
    }
    this.gety = function () {
        return self_qizi.y1;
    }
    this.getdiv = function () {
        return self_qizi.div
    }
}

var QZLINK = function () {
    this.link = []
    this.color = null
    self_link = this

    // 玩家
    this.append = function () {
        var qz = new QZ()
        self_link.link.push(qz)
    }

    this.setlinkcolor = function (c) {
        self_link.color = c
    }
    this.remove = function (obj_link, index) {
        if (index == null)
            index = 0
        for (var i in obj_link.link) {
            if (index == i) {
                var qz = obj_link.link[i]
                obj_link.link.splice(i, 1)
                return qz
            }
        }
    }

    this.findQZ = function (index) {
        for (var i in self_link.link) {
            if (index == i) {
                return self_link.link[i]
            }
        }
    }
    this.showlink = function () {
        for (var i in self_link.link) {
            console.log(i)
            console.log(self_link.link[i])
        }
    }
    this.getlength = function () {
        return self_link.link.length
    }
}

var player = function (r, b, red_c, black_c) {
    this.red_player = r
    this.black_player = b
    this.red_color = red_c
    this.black_color = black_c
    this.ui = new Ui()
    // 创建棋子
    this.red = new QZLINK()
    this.red.setlinkcolor(this.red_color)
    for (i = 0; i < 12; i++) {
        this.red.append()
    }
    this.ui.upPlayerQz(this.red, this.red_player)

    this.black = new QZLINK()
    this.black.setlinkcolor(this.black_color)
    for (i = 0; i < 12; i++) {
        this.black.append()
    }
    this.ui.upPlayerQz(this.black, this.black_player)



    self_player = this
    this.deleteblackQz = function () {
        qz = self_player.black.remove(self_player.black)
        this.ui.upPlayerQz(this.black, this.black_player)
        return qz

    }
    this.deleteredQz = function () {
        qz = self_player.red.remove(self_player.red)
        this.ui.upPlayerQz(this.red, this.red_player)
        return qz
    }
    this.initplayer = function () {
        self_player.red = new QZLINK()
        self_player.red.setlinkcolor(self_player.red_color)
        for (i = 0; i < 12; i++) {
            self_player.red.append()
        }
        self_player.ui.upPlayerQz(self_player.red, self_player.red_player)

        self_player.black = new QZLINK()
        self_player.black.setlinkcolor(self_player.black_color)
        for (i = 0; i < 12; i++) {
            self_player.black.append()
        }
        self_player.ui.upPlayerQz(self_player.black, self_player.black_player)
    }

}

var Lie = function () {
    this.Llie = [null, null, null]
    self_lie = this

    this.setLieQz = function (lie, point, color) {
        var qz = new QZ()
        qz.setcolor(color)
        qz.setdiv(point)
        var i = null;
        if (qz.getx() == 75 + "px" || qz.gety() == 100 + "px" || qz.getx() == 775 + "px" || qz.gety() == 800 + "px") {
            lie.Llie[0] = qz;
            i = 0
        }
        if (qz.getx() == 175 + "px" || qz.gety() == 200 + "px" || qz.getx() == 675 + "px" || qz.gety() == 700 + "px") {
            lie.Llie[1] = qz;
            i = 1
        }
        if (qz.getx() == 275 + "px" || qz.gety() == 300 + "px" || qz.getx() == 575 + "px" || qz.gety() == 600 + "px") {
            lie.Llie[2] = qz;
            i = 2
        }
        return i
    }
    this.deleteLieQz = function (lie, point) {
        x = point.style.top;
        y = point.style.left;
        var i = null;
        if (x == 75 + "px" || y == 100 + "px" || x == 775 + "px" || y == 800 + "px") {
            lie.Llie[0] = null;
            i = 0;
        }
        if (x == 175 + "px" || y == 200 + "px" || x == 675 + "px" || y == 700 + "px") {
            lie.Llie[1] = null;
            i = 1;
        }
        if (x == 275 + "px" || y == 300 + "px" || x == 575 + "px" || y == 600 + "px") {
            lie.Llie[2] = null;
            i = 2;
        }
        return i
    }
    this.deleteLieQzForQz = function (lie, qz) {
        x = qz.getx()
        y = qz.gety()
        var i = null;
        if (x == 75 + "px" || y == 100 + "px" || x == 775 + "px" || y == 800 + "px") {
            lie.Llie[0] = null;
            i = 0
        }
        if (x == 175 + "px" || y == 200 + "px" || x == 675 + "px" || y == 700 + "px") {
            lie.Llie[1] = null;
            i = 1
        }
        if (x == 275 + "px" || y == 300 + "px" || x == 575 + "px" || y == 600 + "px") {
            lie.Llie[2] = null;
            i = 2
        }
        return i
    }
    this.getLieQz = function (lie, point, color) {
        var qz = null;
        x = point.style.top;
        y = point.style.left;
        if (x == 75 + "px" || y == 100 + "px" || x == 775 + "px" || y == 800 + "px") {
            qz = lie.Llie[0]
        }
        if (x == 175 + "px" || y == 200 + "px" || x == 675 + "px" || y == 700 + "px") {
            qz = lie.Llie[1];
        }
        if (x == 275 + "px" || y == 300 + "px" || x == 575 + "px" || y == 600 + "px") {
            qz = lie.Llie[2];
        }
        if (qz == null) {
            return null
        }
        if (color == qz.color) {
            return qz
        } else {
            return null
        }
    }

    this.getLieIndex = function (lie, point) {
        var qz = null;
        x = point.style.top;
        y = point.style.left;
        var i = null;
        if (x == 75 + "px" || y == 100 + "px" || x == 775 + "px" || y == 800 + "px") {
            qz = lie.Llie[0]
            i = 0
        }
        if (x == 175 + "px" || y == 200 + "px" || x == 675 + "px" || y == 700 + "px") {
            qz = lie.Llie[1];
            i = 1
        }
        if (x == 275 + "px" || y == 300 + "px" || x == 575 + "px" || y == 600 + "px") {
            qz = lie.Llie[2];
            i = 2
        }
        return i
    }

}

var LLink = function () {
    this.heng = []
    self_llink = this

    this.llinkappend = function (index) {
        var lie = new Lie()
        self_llink.heng[index] = lie
    }

    this.getHengIndex = function (point) {
        if (point != null) {
            var click_x = point.style.top
            var click_y = point.style.left
            for (var i in qizipoint) {
                var point_x = qizipoint[i]["x"] + "px"
                var point_y = qizipoint[i]["y"] + "px"
                if ((click_x == point_x) && (click_y == point_y)) {
                    return parseInt(i / 3)
                }
            }
        }
    }
    this.getQpIndex = function (point) {
        if (point != null) {
            var click_x = point.style.top
            var click_y = point.style.left
            for (var i in qizipoint) {
                var point_x = qizipoint[i]["x"] + "px"
                var point_y = qizipoint[i]["y"] + "px"
                if ((click_x == point_x) && (click_y == point_y)) {
                    return parseInt(i)
                }
            }
        }
    }
    this.getHengIndexForQz = function (qz) {
        if (qz != null) {
            var click_x = qz.getx()
            var click_y = qz.gety()
            for (var i in qizipoint) {
                var point_x = qizipoint[i]["x"] + "px"
                var point_y = qizipoint[i]["y"] + "px"
                if ((click_x == point_x) && (click_y == point_y)) {
                    return parseInt(i / 3)
                }
            }
        }
    }

    this.setLLinkQz = function (llink, point, color) {
        var index = self_llink.getHengIndex(point)
        llink.heng[index].setLieQz(llink.heng[index], point, color)
    }
    this.deleteLLinkQz = function (llink, point) {
        var index = self_llink.getHengIndex(point)
        llink.heng[index].deleteLieQz(llink.heng[index], point)
    }

    this.deleteLLinkQzFor = function (llink, link_i, lie_i) {
        var index = link_i * 3 + lie_i
        var point = null
        for (var i in qizipoint) {
            if (i == index) {
                point = document.querySelector("#qi_point" + i)
                self_llink.deleteLLinkQz(llink, point)
                return point
            }
        }
    }
    this.getLLinkQz = function (llink, point, color) {
        var index = self_llink.getHengIndex(point)
        var qz = llink.heng[index].getLieQz(llink.heng[index], point, color)
        return qz
    }
    this.moveLLinkQz = function (llink, qz, point, color) {
        var index = self_llink.getHengIndex(point)
        llink.heng[index].setLieQz(llink.heng[index], point, color)
        var index2 = self_llink.getHengIndex(qz)
        var lie_i = llink.heng[index2].deleteLieQz(llink.heng[index2], qz)
        return index2 * 3 + lie_i
    }

}
var Ui = function () {
    this.playerclass = "qzdiv"
    this.qpqzclass = "qpqzdiv"
    self_ui = this
    this.upPlayerQz = function (obj_link, div) {
        this.deletePlayerQz(div)
        for (i = 0; i < obj_link.link.length; i++) {
            this.createPlayerQz(div, i, obj_link.color)
        }
        div.querySelector("h3").innerText = "剩余" + obj_link.link.length
    }
    this.createPlayerQz = function (div, index, color) {
        var divchild = document.createElement("div");
        divchild.setAttribute("class", self_ui.playerclass);
        divchild.style.backgroundColor = color;
        divchild.setAttribute("id", "index_" + index);
        div.appendChild(divchild)
        divchild.style.display = "block"
    }
    this.deletePlayerQz = function (div, index) {
        if (index != null) {
            var divchild = div.querySelector("#index_" + index);
            divchild.style.display = "none"
            divchild.parentNode.removeChild(divchild);
        } else if (div != null) {
            var qzdiv = div.querySelectorAll("." + self_ui.playerclass)
            if (qzdiv.length != 0)
                for (i = 0; i < qzdiv.length; i++) {
                    qzdiv[i].style.display = "none"
                    qzdiv[i].parentNode.removeChild(qzdiv[i]);
                }
        }
    }




    this.upQiPan = function (llink, div) {
        for (var lie in llink) {
            for (var qz in lie) {
                if (qz != null) {

                }
                console.log(qz)
            }
        }
    }
    this.createQpUiQz = function (div, color) {
        var divchild = document.createElement("div");
        divchild.setAttribute("class", self_ui.qpqzclass);
        divchild.style.backgroundColor = color;
        div.appendChild(divchild)
        divchild.style.display = "block"
    }
    this.deleteQpUiQz = function (div) {
        if (div != null) {
            var divchild = div.querySelector("." + self_ui.qpqzclass);
            divchild.style.display = "none"
            divchild.parentNode.removeChild(divchild);
        }
    }
    this.deleteQpUiQzForIndex = function (index) {
        var div = document.getElementById("qi_point" + index)
        self_ui.deleteQpUiQz(div)
    }

    this.selectQpUiQz = function (div) {
        if (div != null) {
            var divchild = div.querySelector("." + self_ui.qpqzclass);
            if (divchild != null)
                divchild.style.boxShadow = "1px 1px 10px 10px #888888"
        }
    }
    this.noselectQpUiQz = function (div) {
        if (div == null) {
            var divchild = document.querySelectorAll("." + self_ui.qpqzclass);
            for (i = 0; i < divchild.length; i++) {
                divchild[i].style.boxShadow = "none"
            }
        } else {
            var divchild = div.querySelector("." + self_ui.qpqzclass);
            if (divchild != null)
                divchild.style.boxShadow = "none"
        }

    }
}

var QiPan = function (c) {
    this.qi_heng = new LLink()
    this.ui = new Ui()
    this.limit = new Limit(this.ui, c)
    this.isplayer = true
    self_qipan = this
    for (i = 0; i < 8; i++) {
        self_qipan.qi_heng.llinkappend(i)
    }

    this.QpSetQz = function (qz_point, color) {
        self_qipan.qi_heng.setLLinkQz(self_qipan.qi_heng, qz_point, color)
        self_qipan.ui.createQpUiQz(qz_point, color)
        self_qipan.limit.judge(self_qipan.qi_heng, false)
    }

    this.QpDeleteQz = function (qz_point) {
        self_qipan.qi_heng.deleteLLinkQz(self_qipan.qi_heng, qz_point)
        self_qipan.ui.deleteQpUiQz(qz_point)
    }
    this.showQp = function () {
        console.log(self_qipan.qi_heng.heng)
        for (i = 0; i < self_qipan.qi_heng.heng.length; i++) {
            var h = self_qipan.qi_heng.heng.length
            for (k = 0; k < h[i].Llie.length; k++) {
                var l = h[i].Llie[k]
                console.log(l)
            }
        }
    }
    this.nextStepclean = function () {
        self_qipan.limit.LimitnextStepclean(self_qipan.qi_heng)
    }
    this.QpGetQz = function (qi_point, color) {
        var qz = self_qipan.qi_heng.getLLinkQz(self_qipan.qi_heng, qi_point, color)
        if (color == null) {
            return qi_point
        }
        if (qz != null) {
            self_qipan.ui.noselectQpUiQz()
            self_qipan.ui.selectQpUiQz(qi_point)
            return qi_point
        } else {
            alert("请选择自己的棋子")
            return null
        }
    }
    this.QpMoveQz = function (qz, qi_point, color) {
        var bool = self_qipan.limit.IsNextJudge(self_qipan.qi_heng, qz, qi_point)
        if (bool) {
            self_qipan.limit.NextJudge(self_qipan.qi_heng, qz, qi_point, color)
        }
        return bool
    }
    this.initQp = function () {
        self_qipan.isplayer = true
        for (i = 0; i < self_qipan.qi_heng.heng.length; i++) {
            for (k = 0; k < self_qipan.qi_heng.heng[i].Llie.length; k++) {
                if (self_qipan.qi_heng.heng[i].Llie[k] != null) {
                    self_qipan.limit.deleteLimitQz(self_qipan.qi_heng, i, k)
                }
            }
        }
        self_qipan.limit.initlimit()
    }
}
var Limit = function (ui, c) {
    this.win = null;
    this.color = c
    this.isnext = false
    this.ui = ui

    self_limit = this
    this.judge = function (llink) {
        for (i = 0; i < llink.heng.length; i++) {
            var left_i = i - 1;
            var right_i = i + 1;
            if (left_i < 0) {
                left_i = 7
            }
            if (right_i > 7) {
                right_i = 0
            }

            if (i % 2 == 1) {
                for (k = 0; k < llink.heng[i].Llie.length; k++) {
                    if ((llink.heng[left_i].Llie[k] == null) || (llink.heng[right_i].Llie[k] == null) || (llink.heng[i].Llie[k] == null)) {

                    } else {
                        var color = llink.heng[i].Llie[k].color
                        if ((llink.heng[left_i].Llie[k].color != color) && (llink.heng[right_i].Llie[k].color != color)) {
                            if ((llink.heng[left_i].Llie[k].color == self_limit.color) || (llink.heng[right_i].Llie[k].color == self_limit.color)) {

                            } else {
                                if (self_limit.isnext) {
                                    self_limit.deleteLimitQz(llink, i, k)
                                } else {
                                    self_limit.upLimitQz(llink, i, k)
                                }
                            }
                        }
                    }
                }
            }

            if ((llink.heng[i].Llie[0] == null) || (llink.heng[i].Llie[1] == null) || (llink.heng[i].Llie[2] == null)) {

            } else {
                var color = llink.heng[i].Llie[1].color
                if ((llink.heng[i].Llie[0].color != color) && (llink.heng[i].Llie[2].color != color)) {
                    if (llink.heng[i].Llie[0].color != self_limit.color) {
                        if (self_limit.isnext) {
                            self_limit.deleteLimitQz(llink, i, 1)
                        } else {
                            self_limit.upLimitQz(llink, i, 1)
                        }
                    }

                }
            }
        }
        if (self_limit.isnext != false) {
            self_limit.iswin(llink)
        }

    }

    this.IsNextJudge = function (llink, theqz, next_point) {
        var the_hi = llink.getHengIndex(theqz)
        var next_hi = llink.getHengIndex(next_point)
        if (the_hi - next_hi == 1 || the_hi - next_hi == -1 || the_hi - next_hi == -7 || the_hi - next_hi == 7|| the_hi - next_hi == 0) {
            var the_qi = llink.heng[the_hi].getLieIndex(llink.heng[the_hi], theqz)
            var next_qi = llink.heng[next_hi].getLieIndex(llink.heng[next_hi], next_point)
            var i = (the_hi * 3 + the_qi) - (next_hi * 3 + next_qi)
            if ((i == -1) || (i == 1) || (i == 3) || (i == -3)|| (i == 21)|| (i == -21)) {
                if (llink.heng[next_hi].Llie[next_qi] == null) {
                    return true
                } else {
                    return false
                }
            } else {
                return false
            }
        } else {
            return false
        }
    }
    this.NextJudge = function (llink, qz, qi_point, color) {
        llink.moveLLinkQz(llink, qz, qi_point, color)
        self_limit.ui.createQpUiQz(qi_point, color)
        self_limit.ui.deleteQpUiQz(qz)
        self_limit.judge(llink)
    }

    this.iswin = function (llink) {
        var fristcolor = null
        var nextcolor = null
        var iswincolor = null
        for (i = 0; i < llink.heng.length; i++) {
            for (k = 0; k < llink.heng[i].Llie.length; k++) {
                if ((llink.heng[i].Llie[k] != null) && (iswincolor == null)) {
                    fristcolor = llink.heng[i].Llie[k].color
                    iswincolor = 0
                } else if ((llink.heng[i].Llie[k] != null) && (iswincolor == 0)) {
                    nextcolor = llink.heng[i].Llie[k].color
                    if (fristcolor != nextcolor) {
                        iswincolor = 1
                        break;
                    }
                }
            }
        }
        if (iswincolor == 0) {
            self_limit.win = fristcolor
        }
    }
    this.initlimit = function () {
        self_limit.isnext = false
        self_limit.win = null;
    }
    this.upLimitQz = function (llink, i, k) {
        var div = self_limit.deleteLimitQz(llink, i, k)
        self_limit.createLimitQz(llink, div)
    }
    this.deleteLimitQz = function (llink, i, k) {
        var div = llink.deleteLLinkQzFor(llink, i, k)
        self_limit.ui.deleteQpUiQz(div)
        return div
    }
    this.createLimitQz = function (llink, div) {
        llink.setLLinkQz(llink, div, self_limit.color)
        self_limit.ui.createQpUiQz(div, self_limit.color)
    }
    this.LimitnextStepclean = function (llink) {
        for (i = 0; i < llink.heng.length; i++) {
            var h = llink.heng
            for (k = 0; k < h[i].Llie.length; k++) {
                var l = h[i].Llie[k]
                if (l.color == self_limit.color) {
                    self_limit.deleteLimitQz(llink, i, k)
                }
            }
        }
    }
}






// --------------------------------main--------------------------------
var qi_point_list = document.querySelectorAll(".qi_point")
var red_player = document.querySelector(".red_Party")
var black_player = document.querySelector(".black_Party")
var red_botton = document.querySelector("#red_nowin")
var black_botton = document.querySelector("#black_nowin")
var player_list = new player(red_player, black_player, player_color[0], player_color[1]);
var qipan = new QiPan(player_color[2]);
var click_count = 0;
var theQz = null
var movexy = null

red_botton.onclick = function () {
    qipan.limit.win = "black"
    win()
}
black_botton.onclick = function () {
    qipan.limit.win = "red"
    win()
}
for (i = 0; i < qi_point_list.length; i++) {
    qi_point_list[i].onclick = function () {
        var a = this.getAttribute("click")
        if (click_count < 24) {
            if (a === "ture") {
                this.setAttribute("click", "false")
                var qi_point = this
                qipanSetqz(qi_point)
            }
            if (click_count == 23) {
                qipan.nextStepclean()
                alert("下一步，移动己方棋子，围杀敌方棋子，剩余棋子多者胜")
            }
        } else if (click_count >= 24) {
            click_count = 24
            qipan.limit.isnext = true
            var qi_point = this
            var color = qipanGetQz(qi_point)
            qipanRemoveQz(color)
        }
        click_count++;
        win()
    }
}

var qipanSetqz = function (qi_point) {
    var qz = null;
    if (click_count % 2 == 0) {
        qz = player_list.deleteblackQz();
        qipan.QpSetQz(qi_point, player_list.black.color)
    } else {
        qz = player_list.deleteredQz();
        qipan.QpSetQz(qi_point, player_list.red.color)
    }
}
var qipanGetQz = function (qi_point) {
    var color = null
    if (qipan.isplayer) {
        color = player_list.red.color
    } else {
        color = player_list.black.color
    }
    if (theQz == null) {
        theQz = qipan.QpGetQz(qi_point, color)
    } else {
        movexy = qipan.QpGetQz(qi_point)
    }
    return color
}
var qipanRemoveQz = function (color) {
    if (movexy != null) {
        if (qipan.QpMoveQz(theQz, movexy, color)) {
            qipan.isplayer = !qipan.isplayer
        }
        movexy = null
        theQz = null
    }
}

var win = function () {
    if (qipan.limit.win != null) {
        alert(qipan.limit.win + " is win，game over")
        click_count = 0;
        theQz = null
        movexy = null
        for (i = 0; i < qi_point_list.length; i++) {
            qi_point_list[i].setAttribute("click", "ture");
        }
        player_list.initplayer()
        qipan.initQp()
    }
}



